<!-- 选中城市 -->
<template>
  <view class="selectCity screen-width">
    <view class="top_bar">
      <van-icon name="cross" @tap="cloneBtn" />
      <view class="select_input" @tap="searchCity">
        <van-icon name="search" />城市名/拼音
      </view>
    </view>
    <view class="curren_city">
      <view class="title">定位/最近访问</view>
      <view class="list">
        <text @click="hanldClick(currentLocation)">{{ currentLocation }}</text>
        <text v-for="(item, index) in list" :key="index" @click="hanldClick(item)">{{ item }}</text>
      </view>
    </view>
    <view class="hotCity">
      <text>热门城市</text>
      <ul>
        <li
          v-for="(item, index) in hotList"
          :key="index"
          @tap="hanldClick(item.name)"
        >{{ item.name }}</li>
      </ul>
    </view>
    <view class="main_city">
      <van-index-bar sticky highlight-color="#545454">
        <view v-for="(item, index) in cityList" :key="index">
          <van-index-anchor :index="item.initialsAlphabetic" :use-slot="true" />
          <van-cell
            v-for="(v, i) in item.values"
            :key="i"
            :title="v.name"
            @click="hanldClick(v.name)"
          />
        </view>
      </van-index-bar>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cityList: [], // 城市列表
      hotList: [], // 热门城市列表
      provinceList: [], // 获取省份
      currentLocation: "", // 当前定位
      recentlyList: [], // 最近访问的城市
      list: [] // 存入本地的列表数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击搜索按钮
    searchCity() {
      uni.navigateTo({
        url: "/pages/index/seachCityPage"
      });
    },
    // 关闭按钮
    cloneBtn() {
      uni.switchTab({
        url: "/pages/index/index"
      });
    },
    // 获取有省份的列表
    getProvince() {
      this.$get(
        "/bmj-api/api/pms/pmsPolicyNotice/getPolicyNoticeAreaInfo"
      ).then(res => {
        if (res.code == 200) {
          let { result } = res;
          this.provinceList = result;
        }
      });
    },
    // 选中城市
    hanldClick(v) {
      let v1 = this.provinceList.map(el => el.values);
      v1 = v1.flat();
      let resIndex = "";
      v1.forEach((el, index) => {
        let i = el.child.findIndex(e => e.name == v);
        if (i > -1) {
          resIndex = index;
          return;
        }
      });
      // 获取本地存储的数据

      this.list = uni.getStorageSync("RecentlyList")
        ? JSON.parse(uni.getStorageSync("RecentlyList"))
        : [];

      this.list.push(v);
      if (this.list.length >= 3) {
        this.list.shift();
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i] === this.currentLocation) {
          this.list.splice(i, 1);
        }
      }
      this.list = JSON.stringify(this.list);
      uni.setStorageSync("RecentlyList", this.list); // 存入定位列表

      uni.setStorageSync("province", v1[resIndex].name); // 存入省份
      uni.setStorageSync("city", v); // 存入城市名称
      uni.switchTab({
        // 调转到到首页
        url: "/pages/index/index"
      });
    },
    // 热门城市
    hotCityList() {
      this.$get(
        "/bmj-api/api/pms/pmsPolicyNotice/getPolicyNoticePopularSearches"
      ).then(res => {
        // console.log(res);
        if (res.code == 200) {
          let { result } = res;
          this.hotList = result;
        }
      });
    },
    // 城市列表
    getCityList() {
      this.$get("/bmj-api/api/pms/pmsPolicyNotice/getPolicyNoticeCityAll").then(
        res => {
          // console.log(res);
          if (res.code == 200) {
            let { result } = res;
            this.cityList = result;
          }
        }
      );
    },
    // 获取当前定位
    getCurrentLocatin() {
      let currentLocatin = uni.getStorageSync("currentLocation");
      if (currentLocatin) {
        this.currentLocation = currentLocatin;
      } else {
        this.currentLocation = "定位中...";
      }
    },
    //获取最近返回的列表
    getDataList() {
      let li = [];
      li = JSON.parse(uni.getStorageSync("RecentlyList")) || [];
      this.list = Array.from(new Set(li)); // 数组去重过滤掉重复的值
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 城市列表
    this.getCityList();
    // 热门城市
    this.hotCityList();
    // 获取省份
    this.getProvince();
    // 获取当前定位
    this.getCurrentLocatin();
    // 获取最近返回的列表
    this.getDataList();
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.selectCity {
  .top_bar {
    height: 100rpx;
    display: flex;
    align-items: center;
    font-size: 50rpx;
    padding: 0 30rpx;
    color: #000;
    background-color: #225996;
    .select_input {
      font-size: 30rpx;
      background-color: #fff;
      border-radius: 50rpx;
      margin: 0 auto;
      color: #ccc;
      display: flex;
      align-items: center;
      padding: 10rpx 0;
      width: 80%;
      // padding: 10rpx 160rpx;
      justify-content: center;
      text {
        font-size: 30rpx;
      }
    }
  }
  .curren_city {
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;

    .title {
      line-height: 100rpx;
      color: rgb(132, 123, 123);
    }
    .list {
      display: flex;
      text {
        width: 200rpx;
        text-align: center;
        padding: 15rpx 30rpx;
        margin: 20rpx 32rpx 20rpx 0;
        background-color: #fff;
      }
    }
  }
  .hotCity {
    padding: 0 30rpx;

    text {
      height: 100rpx;
      line-height: 100rpx;
      color: rgb(132, 123, 123);
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 200rpx;
        margin: 20rpx 32rpx 20rpx 0;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        background-color: #fff;
        color: #545454;
      }
    }
  }
}
</style>
